<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" destroyOnClose title="卡种设置" :width="drawerWith" :showFooter="true" @ok="handleOk">
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" size="small">
      <a-tab-pane tab="权益设置" key="form1">
        <VipcardServerSet ref="form1"></VipcardServerSet>
      </a-tab-pane>
      <a-tab-pane tab="使用机场" key="form2">
        <VipcardUseAirportSet ref="form2"></VipcardUseAirportSet>
      </a-tab-pane>
      <a-tab-pane tab="售卖机场" key="form3">
        <VipcardSellAirportSet ref="form3"></VipcardSellAirportSet>
      </a-tab-pane>
      <a-tab-pane tab="售卖公众号" key="form4">
        <GoodsWechatSet ref="form4"></GoodsWechatSet>
      </a-tab-pane>
    </a-tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, unref, getCurrentInstance, nextTick } from 'vue';
import { BasicDrawer, useDrawerInner } from '@apps/antd-admin/src/components/drawer';
import VipcardServerSet from './VipcardServerSet.vue';
import VipcardUseAirportSet from './VipcardUseAirportSet.vue';
import VipcardSellAirportSet from './VipcardSellAirportSet.vue';
import GoodsWechatSet from '@apps/ant-bus/src/views/business/goods/goods/components/GoodsWechatSet.vue';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';
const { getIsMobile } = useAppInject();
const drawerWith = ref('40%');
if (unref(getIsMobile)) {
  drawerWith.value = '90%';
}
const ctx: any = getCurrentInstance();
// 声明Emits
const emit = defineEmits(['success', 'register']);
//当前选中tab
const activeKey = ref('form1');
//当前列表编辑数据对象
const record = ref();
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async data => {
  record.value = data.record;
  setDrawerProps({ confirmLoading: false });
  handleTabChange();
});

/**
 * tab切换事件
 */
function handleTabChange() {
  nextTick(() => {
    ctx.refs[activeKey.value].setData(record.value);
  });
}

/**
 * 确定按钮事件
 */
async function handleOk() {
  try {
    setDrawerProps({ confirmLoading: true });
    ctx.refs[activeKey.value].handleSubmit(callback => {
      //执行子组件回调事件
      callback && callback(emit);
      setDrawerProps({ confirmLoading: false });
      //关闭抽屉
      //closeDrawer();
    });
  } catch (err) {
    setDrawerProps({ confirmLoading: false });
  }
}
</script>
